@import "../../base/base";

.tabMenu {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 48px;
  background-color: #fff;
  border-top: 1px solid $border;

  &__btn {
    flex: 1;
    flex-direction: column;
    text-decoration: none;

    @include flex-center;
  }

  &__icon {
    display: block;
    width: 22px;
    height: 22px;
    background-color: #ccc;

    &--movie {
      background: #fff url("../../icons/movie.png") 50% / contain no-repeat;
    }

    &--user {
      background: #fff url("../../icons/user.png") 50% / contain no-repeat;
    }
  }

  &__btn--active {
    .tabMenu__text {
      color: #ff4c64;
    }

    .tabMenu__icon {
      &--movie {
        background: #fff url("../../icons/movie-solid.png") 50% / contain no-repeat;
      }
      &--user {
        background: #fff url("../../icons/user-solid.png") 50% / contain no-repeat;
      }
    }
  }

  &__text {
    color: #666;
    font-size: 10px;
    margin-top: 4px;
  }
}
